<template>
  <div id="users" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item ms-1">系统管理</li>
        <li class="breadcrumb-item">
          <router-link to="/h5/admin/users">员工</router-link>
        </li>
        <li class="breadcrumb-item active">新建</li>
      </ol>
    </nav>

    <div class="card-body">
      <form>
        <div class="row mb-1 mb-1">
          <label class="control-label col-3 text-end"> 用户名* </label>
          <div class="col-9">
            <input type="text" class="form-control" v-model="user.username" />
            <span class="text-muted small">登录系统用的用户名</span>
          </div>
        </div>
        <div class="row mb-1 mb-1">
          <label class="control-label col-3 text-end"> 姓名* </label>
          <div class="col-9">
            <input type="text" class="form-control" v-model="user.empname" />
            <span class="text-muted small">真实姓名</span>
          </div>
        </div>
        <div class="row mb-1">
          <label class="control-label col-3 text-end"> 手机 </label>
          <div class="col-9">
            <input type="text" class="form-control" v-model="user.mobileNo" />
            <span class="text-muted small"></span>
          </div>
        </div>
        <div class="row mb-1">
          <label class="control-label col-3 text-end"> 电子邮件 </label>
          <div class="col-9">
            <input type="text" class="form-control" v-model="user.email" />
            <span class="text-muted small"></span>
          </div>
        </div>
        <div class="row mb-1">
          <label class="control-label col-3 text-end"> eterm用户名 </label>
          <div class="col-9">
            <input
              type="text"
              class="form-control"
              v-model="user.etermUsername"
            />
            <span class="text-muted small"></span>
          </div>
        </div>
        <div class="row mb-1">
          <label class="control-label col-3 text-end"> 部门 </label>
          <div class="col-9">
            <select class="form-select" v-model="deptIds" size="8" multiple>
              <template v-for="info in departments">
                <option
                  :value="info.id"
                  v-if="info.parentId > 0"
                  :key="info.id"
                >
                  {{ info.name }}
                </option>
              </template>
            </select>
            <span class="text-muted small"></span>
          </div>
        </div>
        <div class="row mb-1">
          <label class="control-label col-3 text-end"> 职位 </label>
          <div class="col-9">
            <input type="text" class="form-control" v-model="user.position" />
            <span class="text-muted small"></span>
          </div>
        </div>
        <div class="row mb-1">
          <label class="control-label col-3 text-end"> 状态 </label>
          <div class="col-9">
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="4"
                v-model.number="user.status"
              />
              <label class="form-check-label text-danger">停用</label>
            </div>
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="1"
                v-model.number="user.status"
              />
              <label class="form-check-label">启用</label>
            </div>
          </div>
        </div>
        <div class="row mb-1">
          <label class="control-label col-3 text-end"> 同步 </label>
          <div class="col-9">
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="0"
                v-model.number="syncWxWork"
              />
              <label class="form-check-label text-danger">暂不</label>
            </div>
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="1"
                v-model.number="syncWxWork"
              />
              <label class="form-check-label">是</label>
            </div>
            <span class="text-muted small">是否与企业微信的数据同步</span>
          </div>
        </div>
      </form>
    </div>
    <div class="card-body row mb-1 bg-light">
      
      <button
        type="button"
        class="btn btn-primary mb-2"
        @click.stop="createUser()"
      >
        保存
      </button>
      <button
        type="button"
        class="btn btn-secondary"
        @click.stop="back()"
      >
        取消
      </button>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { mapActions } from "vuex";
import { searchUser, createUser, searchDepartments } from "@/api/admin.js";

export default {
  data() {
    return {
      id: 0,

      user: {
        id: 0,
        username: "",
        empname: "",
        mobileNo: "",
        email: "",
        etermUsername: "",
        position: "",
        status: 0,
      },
      deptIds: [],
      departments: [],
      syncWxWork: 1,
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  mounted: function () {
    let id = parseInt(this.$route.query.id);
    if (isNaN(id) === false) {
      this.id = id;
      this.searchDetail();
    } else {
      this.newUser();
    }

    this.searchDepartments();
  },
  methods: {
    ...mapActions(["showLoading", "hideLoading"]),
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    searchDetail: function () {
      searchUser(this.id, (v) => {
        this.user = v;
        this.editUser();
      });
    },
    newUser: function () {
      this.user.id = 0;
      this.user.username = "";
      this.user.empname = "";
      this.user.mobileNo = "";
      this.user.email = "";
      this.user.etermUsername = "";
      this.user.position = "";
      this.user.status = 1;

      this.deptIds.splice(0);
    },
    createUser: function () {
      const params = {
        id: this.user.id,
        username: this.user.username,
        fullName: this.user.empname,
        mobileNo: this.user.mobileNo,
        email: this.user.email,
        position: this.user.position,
        etermUsername: this.user.etermUsername,
        status: this.user.status,
        departments: this.deptIds,
        syncWxWork: this.syncWxWork,
      };

      createUser(params, (jsonResult) => {
        if (jsonResult.status !== "OK") {
          this.showErrMsg(jsonResult.errmsg);
        } else {
          this.showErrMsg("操作成功");
          this.back();
        }
      });
    },
    editUser: function (index) {
      this.deptIds.splice(0);
      for (const d of this.user.departments) {
        this.deptIds.push(d.id);
      }
    },
    searchDepartments: function () {
      const params = {
        "sc.pageNo": 1,
        "sc.pageSize": 500,
      };

      searchDepartments(params, (jsonResult) => {
        this.departments = jsonResult.dataList;
      });
    },
  },
};
</script>
